<template>
	<div class="container">
		<a-row :gutter="20" justify="end">
			<a-col :span="2" class="py-4 text-center">
				<a-space>
					<a-button @click="closeTab('/purchase/order/list')">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
		<h2 style="text-align:center;margin-bottom: 30px;">采购单详情</h2>

		<a-descriptions title="采购单信息" bordered size="middle">
			<a-descriptions-item label="项目名称" :span="2">{{ info.planInfo?.project?.name }}</a-descriptions-item>
			<a-descriptions-item label="采购单号">{{ info.code }}</a-descriptions-item>
			<a-descriptions-item label="采购人" :span="2">{{ info.purchaser?.fullname }}</a-descriptions-item>
			<a-descriptions-item label="采购时间">{{ info.create_time }}</a-descriptions-item>
			<template v-if="type==='purchase'">
				<a-descriptions-item label="接收联系人">{{ info.planInfo?.receiver }}</a-descriptions-item>
				<a-descriptions-item label="联系人电话">{{ info.planInfo?.receiver_tel }}</a-descriptions-item>
				<a-descriptions-item label="送达日期">{{ info.planInfo?.deliver_time }}</a-descriptions-item>
				<a-descriptions-item label="送达地址">{{ info.planInfo?.deliver_address }}</a-descriptions-item>
			</template>
			<template v-if="type==='machineapply'">
				<a-descriptions-item label="现场联系人">{{ info.planInfo?.receiver }}</a-descriptions-item>
				<a-descriptions-item label="联系人电话">{{ info.planInfo?.receiver_tel }}</a-descriptions-item>
			</template>
		</a-descriptions>

		<h3 style="margin: 30px 0;">本次采购物资清单</h3>
		<a-table v-if="type==='purchase'" :pagination="false" :data-source="info.materials" :columns="purchaseColumns">
			<template #bodyCell="{ column, index }">
				<template v-if="column.dataIndex === 'id'">{{ index+1 }}</template>
			</template>
		</a-table>
		<a-table v-if="type=='machineapply'" :pagination="false" :data-source="info.materials" :columns="machineapplyColumns">
			<template #bodyCell="{ column, index }">
				<template v-if="column.dataIndex === 'id'">{{ index+1 }}</template>
			</template>
		</a-table>

		<a-table v-if="type=='shangtong'" :pagination="false" :data-source="info.materials" :columns="shangtongColumns">
			<template #bodyCell="{ column, index }">
				<template v-if="column.dataIndex === 'art_indexes'">
					<span v-for="(item, ii) in info.materials[index]?.art_indexes" :key="ii" class="mr-5">
						{{ artIndexesGongHaos.find(i => i.value === item.gonghao_id)?.label }};
					</span>
				</template>
			</template>
		</a-table>

		<a-table v-if="type=='auxiliary'" :pagination="false" :data-source="info.materials" :columns="auxiliaryColumns">
			<template #bodyCell="{ column, index }">
				<template v-if="column.dataIndex === 'id'">{{ index+1 }}</template>
			</template>
		</a-table>

		<a-row :gutter="20">
			<a-col :span="24" class="py-4 text-center">
				<a-space>
					<a-button @click="closeTab('/purchase/order/list')">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, getCurrentInstance, inject } from "vue";
import { post, treeToList } from "../utils";
import { useRoute } from "vue-router";
import { CloseOutlined } from "@ant-design/icons-vue";
const route = useRoute();
const id = computed(() => {
	return route.params.id || 0;
});
import dayjs from "dayjs";
import { subtract } from "@/utils/operation.js";
const type = computed(() => {
	return route.query.type;
});
const purchaseColumns = [
	{
		title: "序号",
		dataIndex: "id",
		width: 60,
		align: "center",
	},
	{
		title: "物资名称",
		dataIndex: "name",
		ellipsis: true
	},
	{
		title: "型号规格",
		dataIndex: "model",
		ellipsis: true
	},
	{
		title: "单位",
		dataIndex: "unit",
		align: "center"
	},
	{
		title: "数量",
		dataIndex: "quantity",
		align: "center"
	},
	{
		title: "供应商",
		dataIndex: "supplier_name",
		align: "center"
	},
	{
		title: "合同",
		dataIndex: "contract_id",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return contractOptions.value.filter(item => item.id === parseInt(text))[0]?.name || "";
		}
	},
	{
		title: "合同余量",
		dataIndex: "contractQuantity",
		align: "center"
	},
	{
		title: "备注",
		dataIndex: "memo",
		align: "center"
	}
];

const machineapplyColumns = [
	{
		title: "序号",
		dataIndex: "id",
		width: 60,
		align: "center"
	},
	{
		title: "机械名称",
		dataIndex: "name",
		ellipsis: true
	},
	{
		title: "规格型号",
		dataIndex: "model",
		align: "center",
		width: 150
	},
	{
		title: "计量单位",
		dataIndex: "unit",
		align: "center"
	},
	{
		title: "数量",
		dataIndex: "quantity",
		align: "center"
	},
	{
		title: "供应商",
		dataIndex: "supplier_name",
		align: "center"
	},
	{
		title: "合同",
		dataIndex: "contract_id",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return contractOptions.value.filter(item => item.id === parseInt(text))[0]?.name || "";
		}
	},
	{
		title: "合同余量",
		dataIndex: "contractQuantity",
		align: "center"
	},
	{
		title: "使用时长",
		dataIndex: "use_time",
		align: "center"
	},
	// {
	// 	title: "时长单位",
	// 	dataIndex: "time_unit",
	// 	align: "center",
	// },
	{
		title: "使用时间",
		dataIndex: "use_date",
		align: "center",
		width: 190,
		customRender: ({ text, record, index, column }) => {
			return dayjs(text).format("YYYY-MM-DD HH:mm:ss");
		}
	},
	{
		title: "备注",
		dataIndex: "memo",
		align: "center"
	}
];

const shangtongColumns = [
	{
		title: "工号",
		dataIndex: "use_position",
		ellipsis: true
	},
	{
		title: "预计浇筑部位",
		dataIndex: "expected_location",
		align: "center"
	},
	{
		title: "砼标号（类别）",
		dataIndex: "model",
		customRender: ({ text, record, index, column }) => {
			return record.name + text;
		}
	},
	{
		title: "采购方量（m3）",
		dataIndex: "fangliang",
		align: "center"
	},
	{
		title: "是否泵送（长度）",
		dataIndex: "changdu",
		align: "center"
	},
	{
		title: "申请塌落度（mm）",
		dataIndex: "luodu",
		align: "center"
	},
	{
		title: "预计浇筑日期",
		dataIndex: "add_time",
		align: "center"
	},
	{
		title: "供应商",
		dataIndex: "supplier_name",
		align: "center"
	},
	{
		title: "合同",
		dataIndex: "contract_id",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return contractOptions.value.filter(item => item.id === parseInt(text))[0]?.name || "";
		}
	},
	{
		title: "合同余量",
		dataIndex: "contractQuantity",
		align: "center"
	},
	{
		title: "技术指标",
		dataIndex: "art_indexes",
		align: "center"
	},
	{
		title: "备注",
		dataIndex: "memo",
		align: "center"
	}
];

const auxiliaryColumns = [
	{
		title: "序号",
		dataIndex: "id",
		width: 60,
		align: "center"
	},
	{
		title: "物资名称",
		dataIndex: "name",
		ellipsis: true
	},
	{
		title: "型号规格",
		dataIndex: "model",
		ellipsis: true
	},
	{
		title: "单位",
		dataIndex: "unit",
		align: "center"
	},
	{
		title: "数量",
		dataIndex: "quantity",
		align: "center"
	},
	{
		title: "供应商",
		dataIndex: "supplier_name",
		align: "center"
	},
	{
		title: "合同",
		dataIndex: "contract_id",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return contractOptions.value.filter(item => item.id === parseInt(text))[0]?.name || "";
		}
	},
	{
		title: "备注",
		dataIndex: "memo",
		align: "center"
	}
];

const info = ref({});
const contractOptions = ref([]);
const artIndexesGongHaos = ref([]);
if (type.value === 'shangtong') {
	post("dictionary", { root_id: 1069 }).then((data) => {
		artIndexesGongHaos.value = data.map(d => {
			return {
				value: d.id,
				label: d.name
			};
		});
	});
}
onMounted(() => {
	post(`purchaseOrder/info`, { id: id.value, type: type.value }).then(async data => {
		let contractIds = [];
		contractIds = contractIds.concat(data.materials.map(item => item.PurchaseOrderMaterial.contract_id).filter(item => !!item));
		const contractList = await post("contract/all", { contract_ids: contractIds.join(",") });
		contractOptions.value = contractList;
		const materialIds = data.materials.map(item => item.id);
		const supplyOrderMaterialInfos = await post(`supplyOrder/materials`, {
			contract_ids: JSON.stringify(contractIds),
			material_ids: JSON.stringify(materialIds)
		});

		// 查浇筑位置列表
		if (type.value === "shangtong") {
			const departmentTree = await post("department/getTrees", { type: 4, parent_id: data.project_id });
			const departmentList = treeToList(departmentTree, []);
			const shangtongInfo = data.shangtongApplyPlan || {};
			const gonghao = departmentList.filter(item => {
				return item.id === shangtongInfo.gonghao_id;
			})[0]?.name;
			const part = departmentList.filter(item => {
				return item.id === shangtongInfo.part;
			})[0]?.name;
			data.materials.map(item => {
				item.use_position = (gonghao || "") + (part || "");
				return item;
			});
		}
		data.materials = data.materials.map(item => {
			const { quantity, supplier_id, contract_id, unit, memo, use_date, use_time, time_unit, fangliang, luodu, changdu, add_time, supplier_name, part, expected_location, art_indexes } = item.PurchaseOrderMaterial;
			// 验收总数
			const ysQuantitySum = supplyOrderMaterialInfos
				.filter(i => {
					return i.contract_id === contract_id && i.material_id === item.id && i.ys_quantity > 0;
				})
				.reduce((target, item) => {
					return target + parseFloat(item.ys_quantity);
				}, 0);
			const contractMaterial = contractList
				.filter(i => i.id === parseInt(contract_id))
				.map(i => {
					return i.materials.filter(j => j.id === item.id)[0];
				})[0];
			const contractQuantity = subtract([(contractMaterial?.ContractMaterial.quantity || 0), ysQuantitySum]);
			return {
				...item,
				quantity,
				unit,
				memo,
				use_date: dayjs(use_date).format("YYYY-MM-DD HH:mm:ss"),
				use_time,
				time_unit,
				supplier_id,
				supplier_name,
				fangliang,
				luodu,
				changdu,
				contract_id,
				add_time: dayjs(add_time).format("YYYY-MM-DD HH:mm:ss"),
				contractQuantity: contractQuantity > 0 ? contractQuantity.toFixed(2) : 0,
				part,
				expected_location,
				art_indexes: art_indexes ? JSON.parse(art_indexes) : [],
			};
		});
		data.create_time = dayjs(data.create_time).format("YYYY-MM-DD HH:mm:ss");
		data.planInfo = data[`${type.value}ApplyPlan`];
		data.planInfo.deliver_time = dayjs(data.planInfo.deliver_time).format("YYYY-MM-DD HH:mm:ss");
		info.value = data;
	});
});

const closeTab = inject("closeTab");
</script>

<style scoped lang="scss">
.container {
	background: #fff;
	padding: 20px;
}
</style>
